<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人中心 - 药品溯源防伪系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body class="bg-gray-50">
    <!-- iOS 状态栏 -->
    <div class="ios-status-bar">
        <div>
            <span class="text-sm font-medium">13:37</span>
        </div>
        <div class="flex items-center">
            <i class="fas fa-signal mr-1"></i>
            <i class="fas fa-wifi mr-1"></i>
            <i class="fas fa-battery-full"></i>
        </div>
    </div>

    <!-- 内容区域 -->
    <div class="content-area">
        <!-- 顶部用户信息 -->
        <div class="ios-card bg-white p-5 mb-6">
            <div class="flex items-center">
                <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?q=80&w=200&auto=format&fit=crop" alt="Avatar" class="w-18 h-18 rounded-full mr-4">
                <div>
                    <h2 class="text-xl font-bold mb-1">张医生</h2>
                    <p class="text-gray-500 text-sm mb-1">国大药房（锦江店）</p>
                    <div class="flex items-center">
                        <span class="bg-blue-100 text-blue-700 text-xs px-2 py-1 rounded-full mr-2">销售顾问</span>
                        <span class="bg-yellow-100 text-yellow-700 text-xs px-2 py-1 rounded-full">VIP会员</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 功能统计 -->
        <div class="grid grid-cols-4 bg-white rounded-xl mb-6 overflow-hidden">
            <div class="text-center p-4 border-r border-b border-gray-100">
                <div class="text-xl font-bold text-blue-500 mb-1">138</div>
                <div class="text-xs text-gray-500">总扫码</div>
            </div>
            <div class="text-center p-4 border-r border-b border-gray-100">
                <div class="text-xl font-bold text-green-500 mb-1">28</div>
                <div class="text-xs text-gray-500">本周扫码</div>
            </div>
            <div class="text-center p-4 border-r border-b border-gray-100">
                <div class="text-xl font-bold text-purple-500 mb-1">830</div>
                <div class="text-xs text-gray-500">积分</div>
            </div>
            <div class="text-center p-4 border-b border-gray-100">
                <div class="text-xl font-bold text-red-500 mb-1">¥235</div>
                <div class="text-xs text-gray-500">奖励</div>
            </div>
        </div>

        <!-- 我的服务 -->
        <div class="bg-white rounded-xl mb-6 overflow-hidden">
            <div class="px-4 py-3 border-b border-gray-100">
                <h3 class="font-bold">我的服务</h3>
            </div>
            
            <div class="grid grid-cols-4 py-4">
                <div class="text-center">
                    <div class="w-12 h-12 rounded-full bg-blue-50 flex items-center justify-center mx-auto mb-1">
                        <i class="fas fa-history text-blue-500"></i>
                    </div>
                    <span class="text-xs">扫码记录</span>
                </div>
                <div class="text-center">
                    <div class="w-12 h-12 rounded-full bg-green-50 flex items-center justify-center mx-auto mb-1">
                        <i class="fas fa-wallet text-green-500"></i>
                    </div>
                    <span class="text-xs">我的钱包</span>
                </div>
                <div class="text-center">
                    <div class="w-12 h-12 rounded-full bg-purple-50 flex items-center justify-center mx-auto mb-1">
                        <i class="fas fa-medal text-purple-500"></i>
                    </div>
                    <span class="text-xs">我的成就</span>
                </div>
                <div class="text-center">
                    <div class="w-12 h-12 rounded-full bg-yellow-50 flex items-center justify-center mx-auto mb-1">
                        <i class="fas fa-star text-yellow-500"></i>
                    </div>
                    <span class="text-xs">等级特权</span>
                </div>
            </div>
        </div>

        <!-- 设置列表 -->
        <div class="bg-white rounded-xl overflow-hidden">
            <div class="profile-item">
                <div class="profile-item-label">
                    <i class="fas fa-user-edit mr-3 text-blue-500"></i>
                    个人资料
                </div>
                <i class="fas fa-chevron-right text-gray-300"></i>
            </div>
            
            <div class="profile-item">
                <div class="profile-item-label">
                    <i class="fas fa-bell mr-3 text-orange-500"></i>
                    消息通知
                </div>
                <i class="fas fa-chevron-right text-gray-300"></i>
            </div>
            
            <div class="profile-item">
                <div class="profile-item-label">
                    <i class="fas fa-question-circle mr-3 text-green-500"></i>
                    帮助中心
                </div>
                <i class="fas fa-chevron-right text-gray-300"></i>
            </div>
            
            <div class="profile-item">
                <div class="profile-item-label">
                    <i class="fas fa-headset mr-3 text-purple-500"></i>
                    联系客服
                </div>
                <i class="fas fa-chevron-right text-gray-300"></i>
            </div>
            
            <div class="profile-item">
                <div class="profile-item-label">
                    <i class="fas fa-cog mr-3 text-gray-500"></i>
                    系统设置
                </div>
                <i class="fas fa-chevron-right text-gray-300"></i>
            </div>
        </div>

        <!-- 退出登录按钮 -->
        <button class="ios-button bg-gray-200 text-gray-700 mt-8 mb-8">退出登录</button>
    </div>

    <!-- iOS TabBar -->
    <div class="ios-tab-bar">
        <a href="home.html" class="tab-item">
            <i class="fas fa-home"></i>
            <span>首页</span>
        </a>
        <a href="scan.html" class="tab-item">
            <i class="fas fa-qrcode"></i>
            <span>扫一扫</span>
        </a>
        <a href="rewards.html" class="tab-item">
            <i class="fas fa-gift"></i>
            <span>奖励</span>
        </a>
        <a href="profile.html" class="tab-item active">
            <i class="fas fa-user"></i>
            <span>我的</span>
        </a>
    </div>
</body>
</html> 